<template>
  <h2>修饰符demo09-from02-modifier.vue</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">lazy</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        失去焦点时，再同步更新：<input type="text" class="zhtt-input" v-model.lazy="name"><br/>
        输入的是：{{name}}
      </p>
      <p class="zhtt-line">
        只能输入数字：<input class="zhtt-input" v-model.number="age1" type="text" /><br/>
        输入的是：{{age1}}<br/>
        只能输入数字：<input class="zhtt-input" v-model.number="age2" type="text" /><br/>
        输入的是：{{age2}}<br/>
        只能输入数字：<input class="zhtt-input" v-model.number="age3" type="text" /><br/>
        输入的是：{{age3}}<br/>
      </p>
      <p class="zhtt-line">
        自动过滤空格：<input type="text" class="zhtt-input" v-model.trim="trim"><br/>
        输入的是：{{trim}}
      </p>
    </div>
    <div class="zhtt-demo-card-footer">v-model.number、v-model.trim这个好像不好用！</div>
  </div>
</template>

<script>
export default {
  name: "demo09-from02-modifier",
  data(){
    return {
      name:null,
      age1:12,
      age2:null,
      age3:'a',
      trim:'自动过滤空格',
    }
  }
}
</script>

<style scoped>

</style>